<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-line></pure-line>
			</pj-demo>

			<!-- 主题 -->
			<pj-demo title="主题">
				<pure-line theme="primary"></pure-line>
				<pure-gap></pure-gap>
				<pure-line theme="success"></pure-line>
				<pure-gap></pure-gap>
				<pure-line theme="warning"></pure-line>
				<pure-gap></pure-gap>
				<pure-line theme="danger"></pure-line>
				<pure-gap></pure-gap>
				<pure-line theme="info"></pure-line>
			</pj-demo>

			<!-- 竖线 -->
			<pj-demo title="竖线">
				<pure-line vertical></pure-line>
			</pj-demo>

			<!-- 自定义颜色 -->
			<pj-demo title="自定义颜色">
				<pure-line color="#ff9900"></pure-line>
				<pure-gap></pure-gap>
				<pure-line
					vertical
					color="#ff9900"
				></pure-line>
			</pj-demo>

			<!-- 设置大小 -->
			<pj-demo
				title="设置大小"
				desc="通过 `size` 属性设置大小"
			>
				<pure-line
					color="#FF0099"
					size="2px"
				></pure-line>
				<pure-gap></pure-gap>
				<pure-line
					color="#0099FF"
					size="10px"
				></pure-line>
				<pure-gap></pure-gap>
				<pure-line
					vertical
					color="#00ff99"
					size="2px"
				></pure-line>
				<pure-gap inline></pure-gap>
				<pure-line
					vertical
					color="#99ff00"
					size="10px"
				></pure-line>
			</pj-demo>

			<!-- 自定义宽高 -->
			<pj-demo
				title="自定义宽高"
				desc="通过 `width` 和 `height` 属性自定义宽高"
			>
				<pure-line
					color="#FF0099"
					width="80%"
				></pure-line>
				<pure-gap></pure-gap>
				<pure-line
					color="#0099FF"
					width="50%s"
				></pure-line>
				<pure-gap></pure-gap>
				<pure-line
					vertical
					color="#00ff99"
					height="20px"
				></pure-line>
				<pure-gap inline></pure-gap>
				<pure-line
					vertical
					color="#99ff00"
					height="50px"
				></pure-line>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	// **************************************************************************************************************
	// * Refs
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Computeds
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Watches
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * 生命周期
	// **************************************************************************************************************

	// **************************************************************************************************************
	// * Functions
	// **************************************************************************************************************
</script>

<style lang="scss" scoped>
	.page {
		--page-layout-background: var(--pure-background-default);
	}
</style>
